<template>
  <div class="schedule-container">
    <h2 class="title">{{ title }}</h2>

    <div class="table-wrapper" :style="{ '--day-count': days.length }">
      <!-- 表头 -->
      <div class="header-row">
        <div class="cell name">人员编号</div>
        <div v-for="d in days" :key="d" class="cell day">{{ d }}</div>
        <div class="cell note">休息周期</div>
        <div class="cell note">备注</div>
      </div>

      <!-- 数据行 -->
      <div v-for="p in dataList" :key="p.code" class="data-row">
        <div class="cell name">{{ p.code }}</div>
        <div
          v-for="d in days"
          :key="d"
          class="cell"
          :class="{ work: isWorkDay(p, d) }"
        ></div>
        <div class="cell note">{{ p.weekOff }}</div>
        <div class="cell note">{{ p.note }}</div>
      </div>

      <!-- 汇总行 -->
      <div class="summary-row">
        <div class="cell name total-label">当天工作人数</div>
        <div v-for="d in days" :key="d" class="cell total">
          {{ workCountByDay[d] ?? 0 }}
        </div>
        <div class="cell note">—</div>
        <div class="cell note">—</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { scheduleData } from "./data.js";

const props = defineProps({
  year: { type: Number, default: 2025 },
  month: { type: Number, default: 10 },
  title: { type: String, default: "2025 年 10 月 病毒包装部上班人数表" },
});

const title = computed(() => props.title);
const daysInMonth = new Date(props.year, props.month, 0).getDate();
const days = Array.from({ length: daysInMonth }, (_, i) => i + 1);
const dataList = scheduleData;

// 非休息日 => 上班日
const isWorkDay = (p, d) => !p.rest.includes(d);

// 汇总统计
const workCountByDay = computed(() => {
  const map = {};
  for (const d of days) {
    map[d] = dataList.reduce((sum, p) => sum + (isWorkDay(p, d) ? 1 : 0), 0);
  }
  return map;
});
</script>

<style scoped>
.schedule-container {
  padding: 16px 20px;
  overflow-x: auto;
}
.title {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
}
.table-wrapper {
  display: inline-block;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

/* 栅格：左侧姓名 + 天数列 + 周期 + 备注 */
.header-row,
.data-row,
.summary-row {
  display: grid;
  grid-template-columns: 100px repeat(var(--day-count), 28px) 120px 220px;
}
.cell {
  border-right: 1px solid #e4e7ed;
  border-bottom: 1px solid #e4e7ed;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.name {
  font-weight: 600;
  background: #fafafa;
}
.day {
  background: #f5f7fa;
  font-weight: 600;
}
.note {
  font-size: 12px;
  padding: 0 6px;
  justify-content: flex-start;
}

/* 上班日 */
.work {
  background-color: #1e90ff;
}

/* 汇总行 */
.summary-row .total-label {
  background: #fffbe6;
  font-weight: 700;
}
.summary-row .total {
  background: #fffbe6;
  font-weight: 500;
}
</style>
